<template>
	<view class="content">
		<view class="order-nav">
			<text :class="params.status == 0 ? 'order-act' : ''" @click="statusSwitch(0)">全部</text>
			<text :class="params.status == 1 ? 'order-act' : ''" @click="statusSwitch(1)">待接单</text>
			<text :class="params.status == 5 ? 'order-act' : ''" @click="statusSwitch(5)">待补单</text>
			<text :class="params.status == 2 ? 'order-act' : ''" @click="statusSwitch(2)">待服务</text>
			<text :class="params.status == 3 ? 'order-act' : ''" @click="statusSwitch(3)">服务中</text>
			<!--<text :class="params.status == 4 ? 'order-act' : ''" @click="statusSwitch(4)">已完成</text>-->
		</view>
		
		<block v-if="order_list.length > 0">
		    <block v-for="(item, index) in order_list" :key="index">
				<view class="service">
					<view class="order-tit">
						<view class="">
							<text>订单号:{{item.order_no}}</text>
							<text class="copy" @click="onCopy(item.order_no)">复制</text>
						</view>
						<text>
						    <block v-if="item.techn_is_repair == 1 && item.techn_repair_sid == 0">
								待补单
							</block>
							<block v-else>
								{{item.status_name}}
							</block>
						</text>
					</view>
					<view class="order-con" @tap="goOrderdetail(item.id)">
						<view class="ser-img" :style="'background-image: url('+item.order_detail[0]['images']+');'"></view>
						<view class="ser-con">
							<view class="ser-tit">
								<text>{{item.order_detail[0]['title']}}</text>
								<text>x {{item.order_detail[0]['buy_number']}}</text>
							</view>
							<view class="ser-des">服务技师：{{item.techn_info.nickname}}</view>
							<view class="ser-des">预约时间：{{item.pre_start_time_time}}</view>
						</view>				
					</view>
					<view class="order-bot">
						<view class="order-price">
							<text>总计:</text>
							<text>￥{{item.total_price}}</text>
						</view>
						<view class="order-state">
							<text v-if="item.status == 1" @tap="goOrderdetail(item.id)">拒绝接单</text>
							<text class="order-sel" v-if="item.status == 1" @tap="goOrderdetail(item.id)">立即接单</text>
						    <text class="order-sel" v-if="item.techn_is_repair == 1 && item.techn_repair_sid == 0" @tap="goOrderdetail(item.id)">罚单</text>
							<text class="order-sel" v-if="item.techn_is_repair == 1 && item.techn_repair_sid == 0" @click="goAppeal(item.id)">申诉</text>
							<!-- <text class="order-sel" v-if="item.status ==2 " @tap="goOrderdetail(item.id)">电话报错</text> -->
						</view>
					</view>
				</view>
			</block>
		</block>
		<block v-else>
			<view class="nodata">
				<view class="nodata-icon">
					<text class="iconfont icon-wushuju"></text>
				</view>
				<view class="nodata-tit">暂无数据</view>
			</view>	
		</block>
		
		<popup-layer ref="popupRef" :direction="'top'">
			<view class="box">
				<view class="mtt">
					<view class="money">订单服务结束</view>
				</view>
				<view class="cause">
					<view class="cause_title">选择客户来源</view>
					<ul>
						<li v-for="item,index in causeList" :key="index" :class="causeIndex==index?'cur':''" @click="onCause(index)">{{item}}</li>
					</ul>
					<view class="but" @click="commission">
						<text>提交</text>
					</view>
					<view class="unusual">
						<image src="/static/04.png" mode=""></image>
						<text>联系异常</text>
					</view>
				</view>
			</view>
		</popup-layer>
		<view class="" v-show="show">
			<view class="popup-bg" catchtouchmove="true"></view>
			<view class="popup-cont">
				<view class="title">电话报错</view>
			    <view class="input">
					<textarea type="number" placeholder="请输入反馈原因" placeholder-class="placeholder" v-model="feedback"></textarea>
				</view>
				<view class="popup-but">
					<view class="cancel" @click="show = false">取消</view>
					<view class="define" @click="onDefine">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
const request = require('../../utils/request');
import popupLayer from '@/components/popup-layer/popup-layer.vue';
export default {
	components:{
		popupLayer
	},
    data() {
        return {
			//获取订单列表参数
			params:{
				status:0, //状态
				page:1, //分页
			},
			//订单列表
			order_list:[],
			//上拉加载状态
			push_status:false,
			
			boolShow:true,
			causeList:['退款原因','退款原因退款原因','退款原因原因','退款原因退款原因','退款原因原因退款原因'],
			causeIndex:-1,
			order_id:'',
			show:false,
			feedback:''
        }
    },
	onLoad()
	{
		
	},
	onShow()
	{
		var that = this;
		that.params.page = 1;
		that.order_list = [];
		that.load_order_lists(); //加载订单列表
	},
	onPullDownRefresh()
	{
		//console.log('下拉');
		var that = this;
		that.params.page = 1;
		that.order_list = [];
		that.load_order_lists(); //加载订单列表
	},
	onReachBottom()
	{
		//console.log('上拉');
		var that = this;
		if(that.push_status == true)
		{
			that.load_order_lists(true); //加载订单列表
		}
	},
    methods: {
		show(){
			this.$refs.popupRef.show(); // 或者 boolShow = rue
		},
		close(e){
			this.$refs.popupRef.close();// 或者 boolShow = false
		},
		onCause(e){
			this.causeIndex = e;
		},
		commission(){
			this.$refs.popupRef.close();// 或者 boolShow = false
		},
		onFeedback(id){
			this.show=true;
			this.order_id = id;
		},
		goAppeal:function(order_id){
			uni.navigateTo({
	            url: '/pages/my/orderStates?order_id='+order_id
	        });
		},
		onDefine(){
			var that = this;
			if (!that.feedback) {
				uni.showToast({
					title: '原因不能为空！',
					duration: 1500,
					icon: "none"
				});
				return
			}
			var formData = {
				reason:that.feedback,
				order_id:that.order_id
			};
			request(app.globalData.api_url+'/v1/order/order_err', 'POST', formData).then((res) => {
				if(res.data.code==0){
					that.feedback = '';
					that.show = false;
					that.params.page = 1;
					that.order_list = [];
					that.load_order_lists(); //加载订单列表
				}
				uni.showToast({
					title:res.data.msg,
					icon:'none'
				})
			})
		},
		// 订单详情
		goOrderdetail(order_id){
			var that = this;
			that.push_status = false;
	        uni.navigateTo({
	            url: '/pages/order/orderdetail?order_id='+order_id
	        });
	    },
	    /**
		 * 加载订单列表
		 */
		load_order_lists:function(is_push = false)
		{
			var that = this;
			var params = that.params;
			//网络请求
			request(app.globalData.api_url+'/v1/order/lists', 'POST', params).then((res) => {
				uni.stopPullDownRefresh();
				if(res.data.code == 0)
				{
					var order_list = that.order_list;
					if(is_push == true)
					{
						//追加
						order_list = order_list.concat(res.data.data);
					}else
					{
						//更改
						order_list = res.data.data;
					}
					that.order_list = order_list;
					that.params.page += 1;
					that.push_status = true;
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
					that.push_status = false;
				}
			});
		},
		/**
		 * 状态切换
		 */
		statusSwitch:function(status)
		{
			var that = this;
			that.params.page = 1;
			that.params.status = status;
			that.order_list = [];
			that.load_order_lists(); //加载订单列表
		},
		
		// 复制订单号
		onCopy(orderNum){
			uni.showModal({
			  content: orderNum, //模板中提示的内容
			  confirmText: '复制',
			  success: (res) => { //点击复制内容的后调函数
				if (res.confirm) {
				  uni.setClipboardData({
					data: orderNum, //要被复制的内容
					success: () => { //复制成功的回调函数
					  uni.$showMsg('复制成功')
					}
				  });
				} else if (res.cancel) {
				  console.log('用户点击取消');
				}
			  }
			});
		},
		
		
    }
}
</script>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
.content{
	.nodata{
		margin-top: 40%;
		text-align: center;
		color:#ccc;
		.nodata-icon{
			text{
				font-size:160rpx;
			}
		}
		.nodata-tit{
			margin-top: 20rpx;
			font-size: 28rpx;
		}
	}
	.order-nav{
		display: flex;
		background-color: #fff;
		text{
			font-size: 28rpx;
			margin: 0 20rpx;
			height:80rpx;
			line-height:80rpx;
			flex: 1;
			text-align: center;
			&.order-act{
				border-bottom:2px solid $uni-text-color-active;
			}
		}
	}
	.service{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.order-tit{
			display: flex;
			justify-content: space-between;
			padding-bottom:20rpx;
			border-bottom: 1px solid #eee;
			font-size:24rpx;
			margin-bottom:20rpx;
			.copy{
				margin-left: 8rpx;
				padding: 6rpx 14rpx;
				background-color: #f5f6f5;
				border-radius: 10rpx;
				font-size: 22rpx;
				font-weight: 100;
				letter-spacing: 2rpx;
			}
			text{
				&:first-child{
					
				}
				&:last-child{
					font-weight: bold;
					color:$uni-text-color-active;
				}
			}
		}
		.order-bot{
			display: flex;
			justify-content: space-between;
			padding-top:20rpx;
			border-top: 1px solid #eee;
			font-size:24rpx;
			margin-top:20rpx;
			.order-price{
				text{
					&:last-child{
						font-weight: bold;
					}
				}
			}
			.order-state{
				text{
					display:inline-block;
					width: 120rpx;
					text-align: center;
					padding:12rpx 20rpx;
					border: 1px solid #aaa;
					margin-left:20rpx;
					border-radius:6rpx;
					color: #aaa;
					font-size: 26rpx;
					&.order-sel{
						border: 1px solid  $uni-text-color-active;
						color: #fff;
						background-color: $uni-text-color-active;
					}
				}
			}
		}
		.order-con{
			display: flex;
			.ser-img{
				width:160rpx;
				height:160rpx;
				border-radius: 14rpx;
				background-position:50%;
				background-repeat:no-repeat;
				background-size: cover;
				margin-right: 20rpx;
			}
			.ser-con{
				flex: 1;
				.ser-tit{
					display: flex;
					justify-content:space-between;
					margin:10rpx 0 20rpx;
					text{
						&:first-child{
							font-weight: bold;
							font-size:30rpx;
						}
						&:last-child{
							font-size:24rpx;
							text-align: right;
							color: $uni-text-color-grey;
						}
					}
				}
				.ser-des{
					font-size:24rpx;
					color: $uni-text-color-grey;
					margin:6rpx 0 0;
				}
				.ser-pri{
					display: flex;
					.ser-pri-lf{
						flex: 2;
						text{
							&:first-child{
								padding: 0 6rpx;
								color:rgb(255,225,177);
								font-size:20rpx;
								background-color: #000;
							}
							&:nth-child(2){
								font-size:32rpx;
								font-weight: bold;
								color:#ff0000;
								margin: 0 2rpx 0 15rpx;
								&::before{
									content:"￥";
									font-weight: normal;
									font-size:24rpx;
								}
							}
							&:last-child{
								font-size:20rpx;
								text-decoration: line-through;
								color: $uni-text-color-grey;
							}
						}
					}
					.ser-pri-rt{
						flex: 1;
						text-align: right;
						text{
							padding: 6rpx 12rpx;
							border-radius:10rpx;
							font-size: 26rpx;
							color: #fff;
							background-color: $uni-text-color-active;
						}
					}
				}
			}			
		}
	}
	::v-deep{
		.popup-content{
			border-top-left-radius:30rpx;
			border-top-right-radius:30rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
		}
	} 
	.box{
		padding: 30rpx;
		.name{
			font-size: 30rpx;
			font-weight: 600;
		}
		.mtt{
			margin-top: 30rpx;
			text-align: center;
			.money{
				font-size: 42rpx;
				color: #000;
			}
		}
		.cause{
			margin-top: 40rpx;
			.cause_title{
				font-size: 34rpx;
				color: #000;
				margin-bottom: 30rpx;
				text-align: center;
			}
			ul{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				li{
					background-color: #f7f7f7;
					font-size: 26rpx;
					line-height: 26rpx;
					margin-right: 16rpx;
					padding: 20rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
				}
			}
			.textarea{
				height: 200rpx;
				textarea{
					background-color: #f7f7f7;
					width: 94%;
					height: 81%;
					padding: 20rpx;
					font-size: 26rpx;
				}
			}
			.but{
				background-color: #38c763;
				width: 80%;
				height: 100rpx;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin:50rpx auto 0;
				text{
					color: #fff;
					font-size: 30rpx;
					line-height: 30rpx;
					letter-spacing: 2rpx;
				}
			}
			.cur{
				border: #38c763 solid 2rpx;
				color: #38c763;
			}
			.unusual{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				padding-bottom: 1rpx;
				image{
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
				text{
					color: #ff4b4c;
					font-size: 26rpx;
					line-height: 26rpx;
				}
			}
		}
	
	}
}
.popup-bg{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      background-color: rgba(1,1,1,0.3);
}
.popup-cont{
      width: 80%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 12rpx;
      background-color: #ffffff;
	  padding-top: 40rpx;
	  .title{
		  text-align: center;
		  padding: 0 30rpx 30rpx;
		  font-size: 30rpx;
		  color: #222;
		  font-weight: 600;
	  }
	  .input{
		  margin: auto;
		  width: 80%;
		  height: 140rpx;
		  border-radius: 10rpx;
		  border: 2rpx solid #f5f5f5;
		  padding: 30rpx;
		  .placeholder{
			  font-size: 28rpx;
		  }
		  textarea{
			  font-size: 28rpx;
			  height: 100%;
		  }
	  }
	  .popup-but{
		  display: flex;
		  align-items: center;
		  justify-content: space-around;
		  padding: 40rpx 0;
	  }
	  .cancel ,.define{
		  width: 160rpx;
		  height: 60rpx;
		  color: #fff;
		  border-radius: 10rpx;
		  font-size: 28rpx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  .cancel{
		  background-color: #999;
	  }
	  .define{
		  background-color: #24c96b;
	  }
}
</style>